<template>
  <div class="sunSearch-box">
    <div class="sunSearch-content">
      <el-row :gutter="24">
        <div v-for="(item, index) in search" :key="index">
          <!-- input搜索 -->
          <el-col v-if="item.type === 'input'" :span="item.span ? item.span : 6" class="el-col-padding">
            <el-input v-model="item.value" size="small" :placeholder="item.hint ? item.hint : '请输入'+item[item.show]" type="text" @keyup.enter.native="handleFilter(true)">
              <template slot="prepend">{{ item[item.show] }}</template>
            </el-input>
          </el-col>
          <!-- select选择搜索 multiple collapse-tags -->
          <el-col v-if="item.type === 'select'" :span="item.span ? item.span : 6" class="el-col-padding" style="position: relative;z-index: 1">
            <el-select
              :ref="`ref_${item.show}`"
              v-model="item.value"
              size="small"
              class="select-box"
              filterable
              :multiple="item.multiple || false"
              :placeholder="item.hint ? item.hint : '请选择'+item[item.show]"
              :style=" item[item.show].length === 3 ? 'width: calc(100% - 80px) !important;' : item[item.show].length === 4 ? 'width: calc(100% - 93px) !important;' : 'width: calc(100% - 67px) !important;'"
              @keyup.enter.native="handleFilter(true, `ref_${item.show}`)"
            >
              <el-option
                v-for="item_select in item.options"
                :key="item_select.value"
                :label="item_select.label"
                :value="item_select.value"
                :disabled="item_select.disabled"
              />
            </el-select>
            <el-input v-model="item.show" size="small" :placeholder="item.hint ? item.hint : '请选择'+item[item.show]" type="text" style="height: 28px !important;" @keyup.enter.native="handleFilter(true)">
              <template slot="prepend">{{ item[item.show] }}</template>
            </el-input>
          </el-col>
          <!-- 级联选择 -->
          <el-col v-if="item.type === 'cascader'" :span="item.span ? item.span : 6" class="el-col-padding" style="position: relative;z-index: 1">
            <el-cascader
              :ref="`ref_${item.show}`"
              v-model="item.value"
              size="small"
              class="select-box"
              filterable
              :options="item.options"
              :multiple="item.multiple || false"
              :placeholder="item.hint ? item.hint : '请选择'+item[item.show]"
              :style=" item[item.show].length === 3 ? 'width: calc(100% - 80px) !important;' : item[item.show].length === 4 ? 'width: calc(100% - 93px) !important;' : 'width: calc(100% - 67px) !important;'"
              @keyup.enter.native="handleFilter(true, `ref_${item.show}`)"
            />
            <el-input v-model="item.show" size="small" :placeholder="item.hint ? item.hint : '请选择'+item[item.show]" type="text" style="height: 28px !important;" @keyup.enter.native="handleFilter(true)">
              <template slot="prepend">{{ item[item.show] }}</template>
            </el-input>
          </el-col>
          <!-- time时间区间搜索 -->
          <el-col v-if="item.type === 'time'" :span="item.span ? item.span : 12" class="el-col-padding" style="position: relative;">
            <div class="flex_center_align">
              <el-date-picker
                v-model="item.value"
                size="small"
                class="select-box"
                :style="setWidth(item[item.show].length)"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-input size="small" type="text" style="height: 28px !important;" @keyup.enter.native="handleFilter(true)">
                <template slot="prepend">{{ item[item.show] ? item[item.show].substring(0,6) : item[item.show] }}</template>
              </el-input>
            </div>
          </el-col>
        </div>
        <el-col :span="6" class="el-col-padding">
          <div class="occupied">占位避免搜索按钮与搜索框重叠</div>
        </el-col>
      </el-row>
      <div class="search_but flex_end">
        <el-button
          type="primary"
          size="mini"
          :disabled="is_upData"
          @click="handleFilter(true)"
        >
          <i class="el-icon-search" />
          搜 索
        </el-button>
        <el-button
          size="mini"
          :disabled="is_upData"
          @click="handleFilter(false)"
        >
          <i class="el-icon-refresh-left" />
          重 置
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SunSearch',
  props: {
    search: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    is_upData() {
      return this.$parent.listLoading
    }
  },
  methods: {
    setWidth(len) {
      let returnValue = ''
      if (len > 6) len = 6
      switch (len) {
        case 2:
          returnValue = 'width: calc(100% - 81px) !important;'
          break
        case 3:
          returnValue = 'width: calc(100% - 94px) !important;'
          break
        case 4:
          returnValue = 'width: calc(100% - 107px) !important;'
          break
        case 5:
          returnValue = 'width: calc(100% - 120px) !important;'
          break
        case 6:
          returnValue = 'width: calc(100% - 133px) !important;'
          break
      }
      return returnValue
    },
    handleFilter(_is, ref) {
      if (ref) this.$refs[ref][0].blur() // 解决回车时下拉框弹出
      if (_is) {
        const search_obj = {}
        this.search.forEach((item) => {
          const obj_ = {}
          console.log('item.value', item.value)
          if (item.value || item.value === false) {
            if (item.show === 'searchtype') {
              obj_[`filter[type]`] = item.value.constructor === Array ? item.value.join(',') : item.value
            } else {
              let v = item.value
              if (item.eng) v = item.value.replace(/，/g, ',')
              obj_[`filter[${item.show}]`] = item.value.constructor === Array ? item.value.join(',') : v
              // if (item.eng) item.value.replace(/，/g, ',')
              // obj_[`filter[${item.show}]`] = item.value.constructor === Array ? item.value.join(',') : item.value
            }
            // 流程中专家组id集集课程名称搜索处理
            if (item.show === 'courseNames') {
              if (item.value.indexOf(',') !== -1) {
                obj_[`filter[${item.show}]`] = item.value.replace(',', '，')
              }
            }
            if (item.special_value) {
              obj_[`filter[${item.show}]`] = item.special_value[item.value]
              console.log('item.special_value[item.value]', item.special_value[item.value])
            }
            Object.assign(search_obj, obj_)
          }
        })
        console.log('search_obj', search_obj)
        this.$parent.searchResult(search_obj)
      } else {
        this.search.forEach((item) => {
          if ('defaultValue' in item) {
            item.value = item.defaultValue
          } else {
            item.value = ''
          }
        })
        this.$parent.searchResult({})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.sunSearch-content ::v-deep {
    &.el-row{
      margin: 0 !important;
    }
  }
.sunSearch-box {
  width: calc(100% - 28px);
  margin: 14px;
  background-color: #FFFFFF;
  .sunSearch-content{
    position: relative;padding: 7px
  }
  .el-col-padding {
    padding: 7px !important
  }
  .search_but {
    position: absolute;background: #FFFFFF;;width: 24%;right: 12px;bottom: 12px;padding: 2px;
  }
  .occupied { background: red;height: 32px;line-height: 32px;font-size: 12px;text-align: center;cursor:default;opacity: 0; }
  .select-box{
    position: absolute;
    background: #FFFFFF;
    width: 100%;
    right: 7px;
    bottom: 7px;
    z-index:9;
    opacity: 1;
  }
}
</style>
